<script setup lang="ts">
  import { ref } from 'vue'
  import { useAdministorStore } from '@/store/administor';
  import type { TableColumnType } from 'ant-design-vue';  
  import { message } from 'ant-design-vue'
  import axios from 'axios'
  import { onMounted } from 'vue';
  import type { tagData } from '@/modules/manage';

  const administorStore = useAdministorStore();
  const searchData=ref({
    label:''
  })
  const createModalOpen = ref(false);
  let tableData = ref<tagData[]>([]);
  const columns = ref<any[]>([]);
  const newTagName= ref('');
  columns.value = [
    { title: '标签ID', dataIndex: 'id', key: 'id' ,width: '150px'},
    { title: '标签名', dataIndex: 'name', key: 'name' ,width: '150px'},
    { 
      title: '操作', 
      key: 'action',
      slots: { customRender: 'action' },
      width: '30%'
    }
  ];

  const getTagsData = async () => {
      const response = await administorStore.getTagList();
      tableData.value = response.data.data;
  };

  onMounted(getTagsData);

  const tagDelete = async(record: tagData) => {
    await axios.delete(`http://192.168.1.8:8000/deleteTag/${record.id}`);
    await getTagsData();
  }

  const tagUpdateModal = async (record: tagData) => {
  }

  const tagCreateModal= async () => {
    createModalOpen.value = !createModalOpen.value;
  }
  const tagCreate = async () => {
    if(newTagName.value == ''){
      message.error('标签名不能为空',1);
    }
    await axios.post(`http://192.168.1.8:8000/createTag`, {Name:newTagName.value});
    await getTagsData();
    createModalOpen.value = !createModalOpen.value;
    message.success('创建成功',1);
    //目前会创建重复的标签，需要修改后端
  }

</script>
<template>
  <div style="flex-direction: column; background-color: rgba(240, 242, 245, 100)">
    <div class="form-head-body">
      <div style="display: flex; align-items: center;">
        <div style="display: flex; align-items: center;justify-content: flex-end; margin-right: 45vw;">
              <p><span style="color: red;">*</span><span>标签名：</span></p>
              <a-input v-model:value="searchData.label" placeholder="" style="width: 18.5vw;"/>
        </div>
      </div>
      <div style="display: flex; align-items: center;">
        <a-button type="primary" style="margin-right: 16px;">搜索</a-button>
        <a-button @click="tagCreateModal" type="primary">新建</a-button>
        <a-modal v-model:open="createModalOpen" :footer="null" style="display:flex; " :maskClosable="false">
          <div style="display: flex;">
            <a-form @submit.prevent="tagCreate">
              <div style="display: flex; align-items: center;justify-content: flex-end; margin-top: 10px;">
                <p><span style="color: red;">*</span><span>新的标签名：</span></p>
                <a-input v-model:value="newTagName" placeholder="" style="width: 18.5vw;"/>
              </div>
              <div style="display: flex; justify-content: space-around; width: 100%;">
                  <a-button type="primary" @click="tagCreate">确定</a-button>
                  <a-button @click="tagCreateModal" type="primary">取消</a-button>
              </div>
            </a-form>
          </div>
        </a-modal>
      </div>
    </div>
    <div class="form-head-body" style="height: 580px;">
      <a-table 
        :dataSource="tableData" 
        :columns="columns" 
        rowKey="id"
        :pagination="{ pageSize: 6 }"
        style="width: 100%;display: flex;justify-content: center;"
      >
        <template #action="{ record }">
          <a-space>
            <!-- <a-button @click="handleAction1(record)">修改</a-button> -->
            <a-button @click="tagDelete(record)" type="primary">删除</a-button>
          </a-space>
        </template>
      </a-table>
    </div>
  </div>
</template>

<style lang="scss">
  .form-head-body{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 16px;
  }
</style>